<template>
  <div class="app-container">
    <div class="table-action-wrapper">
      <el-button @click="beforeAddMember" style="margin-bottom: 20px"
        >添加成员</el-button
      >
      <el-input
        placeholder="按照成员名字搜索"
        v-model="filter"
        @change="handleFilterChange"
        style="margin-left: 20px; width: 300px"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

      <el-button @click="handleFilterReset" style="margin-left: 20px" type="primary">重置</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="filterList"
      element-loading-text="Loading"
      border
      highlight-current-row
    >
    <el-table-column label="序号">
      <template slot-scope="scope">
        {{scope.row.id}}
      </template>
    </el-table-column>
      <el-table-column label="名字">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="job" label="职称">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.job }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column sortable prop="direction" label="研究方向">
        <template slot-scope="scope">
          {{ scope.row.direction }}
        </template>
      </el-table-column>
      <el-table-column
        :filters="[
          { text: '已毕业', value: 1 },
          { text: '未毕业', value: 0 },
        ]"
        :filter-method="filterGraduate"
        label="是否毕业"
      >
        <template slot-scope="scope">
          <i
            style="font-size: 18px; color: orangered"
            class="el-icon-more-outline"
            v-if="scope.row.graduate == 0"
          />
          <i
            style="font-size: 18px; color: green"
            class="el-icon-circle-check"
            v-else
          ></i>
        </template>
      </el-table-column>
      <el-table-column label="毕业去向">
        <template slot-scope="scope">
          {{ scope.row.company }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="beforeUpdataMember(scope.row)"
            style="margin-right: 15px"
            >编辑</el-button
          >

          <el-popconfirm
            @onConfirm="handleDeletMember(scope.row)"
            title="确定删除吗？"
          >
            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="成员信息" :visible.sync="drawer" direction="rtl">
      <el-form :model="memberObj" label-width="80px">
        <el-form-item label="成员名称">
          <el-input v-model="memberObj.name"></el-input>
        </el-form-item>
        <el-form-item label="成员职称">
          <el-select v-model="memberObj.job">
            <el-option label="研究生" value="master"></el-option>
            <el-option label="博士" value="phd"></el-option>
            <el-option label="科研助理" value="assistant"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="研究方向">
          <el-input v-model="memberObj.direction"></el-input>
        </el-form-item>
        <el-form-item label="个人照片">
          <el-upload
            class="avatar-uploader"
            name="f1"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="memberObj.img_url"
              :src="host + '/' + memberObj.img_url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="个人主页">
          <el-input v-model="memberObj.link"></el-input>
        </el-form-item>

        <el-form-item v-if="memberObj.id" label="是否毕业">
          <el-radio-group v-model="memberObj.graduate">
            <el-radio :label="0">未毕业</el-radio>
            <el-radio :label="1">已毕业</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="memberObj.id" label="毕业去向">
          <el-input v-model="memberObj.company"></el-input>
        </el-form-item>
      </el-form>
      <el-button
        style="margin-left: 12px"
        type="success"
        @click="handleUpdateMember"
        v-if="memberObj.id"
        >更新</el-button
      >
      <el-button
        style="margin-left: 12px"
        type="primary"
        @click="handleAddMember"
        v-else
        >添加</el-button
      >
    </el-drawer>
  </div>
</template>

<script>
import {
  addMember,
  deleteMember,
  getMembers,
  updateMember,
} from "@/api/member";
export default {
  data() {
    return {
      list: [],
      filterList: [],
      listLoading: true,
      drawer: false,
      memberObj: {
        name: "",
        link: "",
        job: "master",
        img_url: "null",
        direction: "null",
      },
      host: process.env.VUE_APP_BASE_API,
      action: process.env.VUE_APP_BASE_API + "/api/v1/upPic",
      filter: "",
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getMembers().then((res) => {
        this.list = res.data.lists;
        this.list.sort((a,b) => {
          if(a.job == b.job) {
            if(a.id < b.id) {
              return -1
            } else {
              return 1
            }
          }
          if(a.job == "phd") {
            return -1
          } else {
            return 1
          }
        })
        this.filterList = this.list;
        this.listLoading = false;
      });
    },
    handleFilterChange(val) {
      if(val.length == 0) {
        this.filterList = this.list;
      }
      let filterList = [];
      this.list.map(item => {
        if(item.name.indexOf(val) > -1) {
          filterList.push(item)
        }
      });
      this.filterList = filterList;
    },
    handleFilterReset(){
      this.filter = ""
      this.filterList = this.list;
    },
    handleAvatarSuccess(res) {
      this.memberObj.img_url = res.raw;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    beforeAddMember() {
      if (this.memberObj.id) {
        this.memberObj = {
          name: "",
          link: "",
          job: "master",
          img_url: "null",
          direction: "null",
        };
      }
      this.drawer = true;
    },
    beforeUpdataMember(obj) {
      obj.img_url = obj.img_url;
      this.memberObj = JSON.parse(JSON.stringify(obj));
      this.drawer = true;
    },
    handleAddMember() {
      addMember(this.memberObj).then((res) => {
        this.drawer = false;
        this.fetchData();
      });
    },

    handleUpdateMember() {
      let tmp = JSON.parse(JSON.stringify(this.memberObj));
      let id = tmp.id;
      delete tmp.id;
      tmp.graduate = (tmp.graduate || 0).toString();
      updateMember(id, JSON.stringify(tmp)).then((res) => {
        this.drawer = false;
        this.fetchData();
      });
    },

    handleDeletMember(obj) {
      deleteMember(obj.id).then((res) => {
        if (res.code && res.code == 200) {
          this.fetchData();
        }
      });
    },

    filterGraduate(value, row) {
      return row.graduate == value;
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 200px;
  display: block;
  object-fit: cover;
}
.el-table th.gutter {
  /* 
    * 解决element-ui 表格篡位的问题 👇 
    */
  display: table-cell !important;
}
</style>